<template>
  <div class="leftcon_btm flex-1">
    <checked-title :title="title">
      <template #right>
        <div class="title-date">{{ gengxinTime }}</div>
      </template>
    </checked-title>

    <div class="unusual">
      <vue-seamless-scroll
        :class-option="classOption"
        :data="yichangList"
        class="warp"
        ref="seamlessScroll"
      >
        <ul>
          <li
            :key="index"
            v-for="(item, index) in yichangList"
          >
            <div class="unusual-group">
              <div class="title flex">
                <div>{{ item.title }}</div>
                <div @click="godetail(item)">
                  <img
                    alt
                    src="@/assets/images/dingwei.png"
                    width="16"
                    style="cursor: pointer;"
                  />
                </div>
              </div>
              <div class="content">
                <div
                  :key="'b' + indexs"
                  class="content-item"
                  v-for="(items, indexs) in item.content"
                >
                  <div class="content-item-title">{{ items.name }}</div>
                  <div class="content-item-num">
                    <span>{{ items.num }}</span>
                    <!-- <span> db </span> -->
                  </div>
                  <div class="content-item-num">
                    <span class="colorred">{{ items.chaochu }}</span>
                  </div>
                  <!-- <div class="content-item-contrast">
                  <div class="content-item-type">
                    {{ items.time }}
                  </div>
                  </div>-->
                </div>
              </div>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
      <!-- <el-carousel direction="vertical" height="180px" :autoplay="true" indicator-position="none" >
				<el-carousel-item class="unusual-group" v-for="(item, index) in yichangList" :key="'a' + index">
					
				</el-carousel-item>
      </el-carousel>-->
      <!-- <div class="unusual-group" v-for="(item, index) in yichangList" :key="'a' + index">
      </div>-->
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Bus from '@/untils/bus'
import { YangChenJianCeDB } from '@/api'
import { getCallPoliceNumList } from '@/api/index'

export default {
  components: {
    vueSeamlessScroll
  },
  props: {
    height: {
      type: Number,
      default: 390
    }
  },
  data() {
    return {
      title: '异常监测点位',
      yichangList: [],
      gengxinTime: null,
      swiperOption: {
        direction: 'vertical', // 垂直切换选项
        slidesPerView: 3, //同时显示数量 默认1
        loop: true, // 循环模式选项
        // 如果需要滚动条
        // scrollbar: {
        // 		el: '.swiper-scrollbar',
        // },
        autoplay: {
          delay: 2000 //1秒切换一次
        }
      },
      classOption: {
        singleHeight: 107
        // direction: 1
      }
    }
  },
  created() {
    // this.abnormal()
    // clearInterval(this.time)
    // this.time = setInterval(() => {
    //   this.abnormal()
    // }, 216000000)
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    this.abnormal()
    // todo
    // this.getList()
  },
  methods: {
    //shuju
    getList() {
      var data = {
        type: this.dex
      }
      getCallPoliceNumList(data)
        .then(res => {
          if (res.data.code == 200) {
            let arr = []
            if (res.data.data == null) {
              return
            }
            res.data.data.forEach(element => {
              arr.push({
                name: element.site_name,
                value: element.signalValue,
                value1: element.callPoliceNum
              })
            })
            setTimeout(() => {
              this.incidentfun(arr)
            }, 100)
          }
        })
        .catch(err => {
        })
    },
    //点击图标跳转
    godetail(id) {
      Bus.$emit('Godetail', id)
    },
    // 异常点位统计
    abnormal() {
      YangChenJianCeDB.YichangTongJi().then(res => {
        this.gengxinTime = this.getYMD()
        this.yichangList = res.data.map((item, index) => {
          let arr1 = ''
          let arr2 = ''
          arr1 = item.bjNum.split('-')
          return {
            id: item.site_number,
            title: item.site_name,
            content: [
              {
                name: arr1[0],
                num: arr1[1],
                chaochu: '超出' + arr1[2],
                time: arr1[3] + '-' + arr1[4] + '-' + arr1[5],
                type: 'bjNum'
              }
            ]
          }
          // if (item.bjNum) {
          //   arr1 = item.bjNum.split('-')
          //   this.yichangList[index].content.push({
          //     name: arr1[0],
          //     num: arr1[1],
          //     chaochu: '超出' + arr1[2],
          //     time: arr1[3] + '-' + arr1[4] + '-' + arr1[5],
          //     type: 'bjNum'
          //   })
          // }
        })
      })
    },

    getYMD() {
      let myDate = new Date()
      let myYear = myDate.getFullYear() //获取完整的年份(4位,1970-????)
      let myMonth = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      let myToday = myDate.getDate() //获取当前日(1-31)
      var hour = myDate.getHours() // 时
      var minutes = myDate.getMinutes() // 分
      myMonth = myMonth > 9 ? myMonth : '0' + myMonth
      myToday = myToday > 9 ? myToday : '0' + myToday
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minutes > 0) {
        minutes = '00'
      }
      let nowDate =
        '数据更新于' + myYear + '-' + myMonth + '-' + myToday + ' ' + hour + ':' + minutes
      return nowDate
    }
  }
}
</script>

<style lang="less" scoped>
.swiper-container {
  height: 400px;
}
.swiper-slide {
  height: 120px !important;
  margin-top: 10px;
}
::-webkit-scrollbar {
  width: 0;
}
// 更新
.leftcon_btm {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.title-date {
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  color: #cccccc;
  text-align: right;
  margin-top: -20px;
}

.unusual {
  height: 100%;
  // margin-top: 30px;
  overflow: auto;
  .warp {
    height: 390px;
  }
}
.unusual-group {
  // margin-bottom: 10px;
  .flex {
    display: flex;
    justify-content: space-between;
  }
  .title {
    padding: 10px 30px;
    background: rgba(31, 73, 135, 0.8);
    border: 1px solid #2368ff;
    font-size: 18px;
    font-weight: 400;
    color: #00d4ff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .content {
    padding: 20px 30px;
    background: rgba(31, 73, 135, 0.25);

    .content-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;

      &:not(:first-child) {
        margin-top: 20px;
      }
      .content-item-title {
        font-size: 16px;
        font-weight: 400;
        color: #cccccc;
        flex: 4.5;
      }
      .content-item-num {
        .colorred {
          color: red;
        }
        flex: 4.5;
        span {
          font-size: 18px;
          font-weight: 400;
          color: red;
          &:last-child {
            font-size: 14px;
          }
        }
      }
      .content-item-contrast {
        flex: 1;
      }
      .content-item-type {
        flex: 1;
        color: #e6e6e6;
        font-size: 12px;
        font-weight: 400;
        padding: 4px 8px;
        &.red {
          background: #7d0122;
        }
        &.yellow {
          background: #d48900;
        }
      }
    }
  }
}
</style>
